<template>
  <div class="SongDetail">
    <div class="song-info">
      <span>{{ singer.name }}</span>
      <span>{{ singer.singerName }}</span>
    </div>
    <div class="song-pic">
      <img :src="singer.cover" alt="" />
    </div>
    <div class="song-control">
      <audio :src="songUrl" autoplay controls></audio>
    </div>
  </div>
</template>

<script>
  import axios from "axios";
  export default {
    name: "SongDetail",
    data() {
      return {
        id: "",
        singer: {},
        songUrl: "",
      };
    },
    created() {
      this.getData();
    },
    methods: {
      getData() {
        console.log(this.$store.getters.singer);
        // this.singer = this.$store.getters.singer;
        // if (Object.keys(this.$store.getters.singer).length != 0) {
        //   this.singer = this.$store.getters.singer;
        //   sessionStorage.setItem("singerSession", JSON.stringify(this.singer))
        // } else {
        //   this.singer = JSON.parse(sessionStorage.getItem("singerSession"));

        // }
        this.singer = JSON.parse(sessionStorage.getItem("singerSession"));
        this.id = this.$route.params.id;
        this.playSong();
      },
      playSong() {
        axios
          .get("/jsososo/song/urls", {
            params: {
              id: this.id,
            },
          })
          .then((res) => {
            this.songUrl = res.data.data[this.id];
          })
          .catch((err) => {
            console.error(err);
          });
      },
    },
  };
</script>

<style>
</style>